M

MLOG

Bahasa Indonesia

Buka kekuatan asersi const TypeScript untuk inferensi tipe immutable, meningkatkan keamanan dan prediktabilitas kode dalam proyek Anda. Pelajari cara menggunakannya secara efektif dengan contoh praktis.

Asersi Const TypeScript: Inferensi Tipe Immutable untuk Kode yang Tangguh

TypeScript, superset dari JavaScript, membawa pengetikan statis ke dunia pengembangan web yang dinamis. Salah satu fitur andalannya adalah inferensi tipe, di mana kompiler secara otomatis menyimpulkan tipe suatu variabel. Asersi const, yang diperkenalkan di TypeScript 3.4, membawa inferensi tipe selangkah lebih maju, memungkinkan Anda untuk menerapkan imutabilitas dan menciptakan kode yang lebih tangguh dan dapat diprediksi.

Apa itu Asersi Const?

Asersi const adalah cara untuk memberitahu kompiler TypeScript bahwa Anda menginginkan sebuah nilai menjadi immutable. Asersi ini diterapkan menggunakan sintaks as const setelah nilai literal atau ekspresi. Ini menginstruksikan kompiler untuk menyimpulkan tipe yang paling sempit (literal) untuk ekspresi tersebut dan menandai semua properti sebagai readonly.

Pada dasarnya, asersi const memberikan tingkat keamanan tipe yang lebih kuat daripada hanya mendeklarasikan variabel dengan const. Meskipun const mencegah penetapan ulang variabel itu sendiri, ia tidak mencegah modifikasi objek atau array yang dirujuk oleh variabel tersebut. Asersi const juga mencegah modifikasi properti objek.

Manfaat Menggunakan Asersi Const

Contoh-contoh Praktis

Contoh 1: Penggunaan Dasar dengan Literal

Tanpa asersi const, TypeScript menyimpulkan tipe message sebagai string:


const message = "Hello, World!"; // Tipe: string

Dengan asersi const, TypeScript menyimpulkan tipe sebagai string literal "Hello, World!":


const message = "Hello, World!" as const; // Tipe: "Hello, World!"

Ini memungkinkan Anda untuk menggunakan tipe string literal dalam definisi dan perbandingan tipe yang lebih presisi.

Contoh 2: Menggunakan Asersi Const dengan Array

Perhatikan sebuah array warna:


const colors = ["red", "green", "blue"]; // Tipe: string[]

Meskipun array dideklarasikan dengan const, Anda masih bisa memodifikasi elemen-elemennya:


colors[0] = "purple"; // Tidak ada error
console.log(colors); // Output: ["purple", "green", "blue"]

Dengan menambahkan asersi const, TypeScript menyimpulkan array sebagai tuple dari string readonly:


const colors = ["red", "green", "blue"] as const; // Tipe: readonly ["red", "green", "blue"]

Sekarang, mencoba memodifikasi array akan menghasilkan kesalahan TypeScript:


// colors[0] = "purple"; // Error: Index signature in type 'readonly ["red", "green", "blue"]' only permits reading.

Ini memastikan bahwa array colors tetap immutable.

Contoh 3: Menggunakan Asersi Const dengan Objek

Serupa dengan array, objek juga dapat dibuat immutable dengan asersi const:


const person = {
  name: "Alice",
  age: 30,
}; // Tipe: { name: string; age: number; }

Bahkan dengan const, Anda masih bisa memodifikasi properti dari objek person:


person.age = 31; // Tidak ada error
console.log(person); // Output: { name: "Alice", age: 31 }

Menambahkan asersi const membuat properti objek menjadi readonly:


const person = {
  name: "Alice",
  age: 30,
} as const; // Tipe: { readonly name: "Alice"; readonly age: 30; }

Sekarang, mencoba memodifikasi objek akan menghasilkan kesalahan TypeScript:


// person.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

Contoh 4: Menggunakan Asersi Const dengan Objek dan Array Bersarang

Asersi const dapat diterapkan pada objek dan array bersarang untuk membuat struktur data yang sangat immutable. Perhatikan contoh berikut:


const config = {
  apiUrl: "https://api.example.com",
  endpoints: {
    users: "/users",
    products: "/products",
  },
  supportedLanguages: ["en", "fr", "de"],
} as const;

// Tipe:
// {
//   readonly apiUrl: "https://api.example.com";
//   readonly endpoints: {
//     readonly users: "/users";
//     readonly products: "/products";
//   };
//   readonly supportedLanguages: readonly ["en", "fr", "de"];
// }

Dalam contoh ini, objek config, objek endpoints yang bersarang di dalamnya, dan array supportedLanguages semuanya ditandai sebagai readonly. Ini memastikan bahwa tidak ada bagian dari konfigurasi yang dapat dimodifikasi secara tidak sengaja saat runtime.

Contoh 5: Asersi Const dengan Tipe Kembalian Fungsi

Anda dapat menggunakan asersi const untuk memastikan bahwa sebuah fungsi mengembalikan nilai yang immutable. Ini sangat berguna saat membuat fungsi utilitas yang tidak boleh memodifikasi inputnya atau menghasilkan output yang dapat diubah.


function createImmutableArray(items: T[]): readonly T[] {
  return [...items] as const;
}

const numbers = [1, 2, 3];
const immutableNumbers = createImmutableArray(numbers);

// Tipe dari immutableNumbers: readonly [1, 2, 3]

// immutableNumbers[0] = 4; // Error: Index signature in type 'readonly [1, 2, 3]' only permits reading.

Kasus Penggunaan dan Skenario

Manajemen Konfigurasi

Asersi const ideal untuk mengelola konfigurasi aplikasi. Dengan mendeklarasikan objek konfigurasi Anda dengan as const, Anda dapat memastikan bahwa konfigurasi tetap konsisten sepanjang siklus hidup aplikasi. Ini mencegah modifikasi yang tidak disengaja yang dapat menyebabkan perilaku tak terduga.


const appConfig = {
  appName: "My Application",
  version: "1.0.0",
  apiEndpoint: "https://api.example.com",
} as const;

Mendefinisikan Konstanta

Asersi const juga berguna untuk mendefinisikan konstanta dengan tipe literal tertentu. Ini dapat meningkatkan keamanan tipe dan kejelasan kode.


const HTTP_STATUS_OK = 200 as const; // Tipe: 200
const HTTP_STATUS_NOT_FOUND = 404 as const; // Tipe: 404

Bekerja dengan Redux atau Pustaka Manajemen State Lainnya

Dalam pustaka manajemen state seperti Redux, imutabilitas adalah prinsip inti. Asersi const dapat membantu menegakkan imutabilitas dalam reducer dan action creator Anda, mencegah mutasi state yang tidak disengaja.


// Contoh reducer Redux

interface State {
  readonly count: number;
}

const initialState: State = { count: 0 } as const;

function reducer(state: State = initialState, action: { type: string }): State {
  switch (action.type) {
    default:
      return state;
  }
}

Internasionalisasi (i18n)

Saat bekerja dengan internasionalisasi, Anda sering kali memiliki serangkaian bahasa yang didukung dan kode lokal yang sesuai. Asersi const dapat memastikan bahwa set ini tetap immutable, mencegah penambahan atau modifikasi yang tidak disengaja yang dapat merusak implementasi i18n Anda. Sebagai contoh, bayangkan mendukung bahasa Inggris (en), Prancis (fr), Jerman (de), Spanyol (es), dan Jepang (ja):


const supportedLanguages = ["en", "fr", "de", "es", "ja"] as const;

type SupportedLanguage = typeof supportedLanguages[number]; // Tipe: "en" | "fr" | "de" | "es" | "ja"

function greet(language: SupportedLanguage) {
  switch (language) {
    case "en":
      return "Hello!";
    case "fr":
      return "Bonjour!";
    case "de":
      return "Guten Tag!";
    case "es":
      return "¡Hola!";
    case "ja":
      return "こんにちは！";
    default:
      return "Greeting not available for this language.";
  }
}

Batasan dan Pertimbangan

Alternatif untuk Asersi Const

Meskipun asersi const adalah alat yang ampuh untuk menegakkan imutabilitas, ada pendekatan lain yang bisa Anda pertimbangkan:

Praktik Terbaik

Kesimpulan

Asersi const TypeScript adalah alat yang berharga untuk menegakkan imutabilitas dan meningkatkan keamanan tipe dalam kode Anda. Dengan menggunakan as const, Anda dapat menginstruksikan kompiler untuk menyimpulkan tipe sesempit mungkin untuk sebuah nilai dan menandai semua properti sebagai readonly. Ini dapat membantu mencegah modifikasi yang tidak disengaja, meningkatkan prediktabilitas kode, dan membuka pemeriksaan tipe yang lebih presisi. Meskipun asersi const memiliki beberapa keterbatasan, mereka adalah tambahan yang kuat untuk bahasa TypeScript dan dapat secara signifikan meningkatkan ketangguhan aplikasi Anda.

Dengan memasukkan asersi const secara strategis ke dalam proyek TypeScript Anda, Anda dapat menulis kode yang lebih andal, dapat dipelihara, dan dapat diprediksi. Manfaatkan kekuatan inferensi tipe immutable dan tingkatkan praktik pengembangan perangkat lunak Anda.

Asersi Const TypeScript: Inferensi Tipe Immutable untuk Kode yang Tangguh | MLOG